<template>
  <a-modal
    :open="visible"
    @update:open="visible = $event"
    title="添加员工"
    :width="600"
    :maskClosable="false"
    :footer="null"
  >
      <a-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        layout="horizontal"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
      >
      <a-form-item label="账号" name="account">
        <a-input v-model:value="formData.account" placeholder="请输入账号" allow-clear />
      </a-form-item>
      
      <a-form-item label="员工姓名" name="name">
        <a-input v-model:value="formData.name" placeholder="请输入员工姓名" allow-clear />
      </a-form-item>
      
      <a-form-item label="手机号" name="phone">
        <a-input v-model:value="formData.phone" placeholder="请输入手机号" allow-clear />
      </a-form-item>
      
      <a-form-item label="邮箱" name="email">
        <a-input v-model:value="formData.email" placeholder="请输入邮箱" allow-clear />
      </a-form-item>
      
      <a-form-item label="性别" name="gender">
        <a-radio-group v-model:value="formData.gender">
          <a-radio value="MALE">男</a-radio>
          <a-radio value="FEMALE">女</a-radio>
        </a-radio-group>
      </a-form-item>
      </a-form>
      
      <div class="form-footer">
        <a-button class="cancel-btn" @click="handleCancel">取消</a-button>
        <a-button type="primary" class="submit-btn" :loading="loading" @click="handleSubmit">保存</a-button>
      </div>
  </a-modal>
</template>

<script setup>
import { ref, reactive, defineProps, defineEmits, watch } from 'vue'
import { message } from 'ant-design-vue'
import { addEmployee } from '@/api/employee'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible', 'success'])

// 表单引用
const formRef = ref()
const loading = ref(false)

// 表单数据
const formData = reactive({
  account: '',
  name: '',
  phone: '',
  email: '',
  gender: 'MALE'
})

// 表单验证规则
const rules = {
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 20, message: '账号长度应为3-20个字符', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入员工姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度应为2-20个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ]
}

// 监听对话框关闭，重置表单
watch(() => props.visible, (val) => {
  if (!val) {
    resetForm()
  }
})

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
  Object.assign(formData, {
    account: '',
    name: '',
    phone: '',
    email: '',
    gender: 'MALE'
  })
}

// 取消操作
const handleCancel = () => {
  emit('update:visible', false)
}

// 提交表单
const handleSubmit = () => {
  formRef.value
    .validate()
    .then(async () => {
      loading.value = true
      try {
        await addEmployee(formData)
        message.success('添加员工成功')
        emit('update:visible', false)
        emit('success')
      } catch (error) {
        console.error('添加员工失败:', error)
        message.error('添加员工失败')
      } finally {
        loading.value = false
      }
    })
    .catch(error => {
      console.log('表单验证失败:', error)
    })
}
</script>

<style lang="scss" scoped>
.form-footer {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    
    .cancel-btn {
      margin-right: 16px;
      min-width: 80px;
    }
    
    .submit-btn {
      min-width: 80px;
    }
  }
</style>